<template>
    <div class="editModal">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                  <span class="container-title-p">
                    BTM机器管理
                    <i class="iconfont icon-jiantou"></i>
                  </span>
                  <span>添加设备</span>
                  </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="form-box" style="width:100%">
            <el-form ref="form"  :model="device" :rules="rules"  label-width="100px" >
                <div class='baseinfo'>
                <span class='baseinfo_title'>编辑设备信息</span>
                <el-form-item label="设备编号" prop="a_title">
                    <el-input placeholder="请输入设备编号"  v-model="device.code" style="width:300px;" size="small"></el-input>
                </el-form-item>
                <el-form-item label="设备地址">
                    <el-select v-model="device.country" placeholder="设备投放地址" @focus="getCountry" size="small">
                        <el-option 
                        v-for='(item,index) in country' 
                        :key="index" 
                        :label="item.chineseName" 
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="detail">
                  <el-input v-model="device.address.detail" placeholder="请输入设备完整地址" style="width:300px;" size="small"></el-input>
                </el-form-item>
                <el-form-item label='谷歌经纬度'>
                    <el-input placeholder="经度" v-model='device.address.googleLon' style="width:300px;display: block;"></el-input>
                    <el-input placeholder="维度" v-model='device.address.googleLat' style="width:300px;display: block;margin-top: 10px;"></el-input>
                </el-form-item>
                <el-form-item label='经纬度'>
                    <el-input placeholder="经度" v-model='device.address.mapLon' style="width:300px;display: block;"></el-input>
                    <el-input placeholder="维度" v-model='device.address.mapLat' style="width:300px;display: block;margin-top: 10px;"></el-input>
                </el-form-item>
                <el-form-item label="设备名称" prop="name">
                    <el-input v-model="device.name" placeholder="请输入设备名称" style="width:300px;" size="small"></el-input>
                </el-form-item>
                <!-- <el-form-item label="设备参数">
                    <el-input v-model="device.params" placeholder="请输入设备参数"  style="width:300px;"></el-input>
                </el-form-item> -->
                <el-form-item label="设备状态">
                    <el-radio-group v-model="device.status">
                        <el-radio-button label="0" value='0'>正常</el-radio-button>
                        <el-radio-button label="1" value='1'>停止</el-radio-button>
                        <el-radio-button label="2" value='2'>故障</el-radio-button>
                        <el-radio-button label="3" value='3'>维修中</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="margin-top:30px;">
                    <el-button type="primary" @click="onSubmit('form')"  size="small"  style="margin-left: 20%;margin-top: 30px">提交</el-button>
                    <el-button @click="cancel"  size="small">取消</el-button>
                </el-form-item>
                </div>

                <!-- <div class="baseinfo">
                 <span class='baseinfo_title'>运营信息</span>


                <el-form-item label="维修人员">
                    <el-select v-model="form.a_type_id" placeholder="请选择维修人员">
                        <el-option v-for='(item,index) in typeCenter' :key="index" :label="item.a_type_name" :value="item.a_tid"></el-option>
                    </el-select>
                </el-form-item>

                 <el-form-item label="运营人员">
                    <el-select v-model="form.a_type_id" placeholder="请选择运营人员">
                        <el-option v-for='(item,index) in typeCenter' :key="index" :label="item.a_type_name" :value="item.a_tid"></el-option>
                    </el-select>
                </el-form-item>


        
                 

                </div> -->

                
            </el-form>
        </div>
    <loading v-if="loading" :tip='"暂无"'></loading>
    </div>
</template>

<script>

import * as rpConfig from "../../../rpConfig/constant";
import { HttpReq } from "@/service/server";
import axios from 'axios';
import {api,apiGet,apiPut} from "@/api/index";
import loading from '@/components/common/loading.vue';
let Server = new HttpReq();
export default {
  components: {
    loading
  },
  created() {

  },
  data: function() {
    return {
      loading:false,
      address:{},
      device:{
        address:{
          cityName:'',
          detail:'',
          googleLat: "",
          googleLon: "",
          mapLat: "",
          mapLon: ""
        },
        name:'',//名称
        params:'',//参数,
        status:0,//状态
        code: "",
        country: '',
        currencyCode: "",
        description: "",//描述
      },
      form: {
        address:{},
        name:'',//名称
        params:'',//参数,
        status:'',//状态
        code: "",
        country: 0,
        currencyCode: "",
        description: "",
      },
      country:[],
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
        address: [
          {required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        detail: [
          //{ type:'string',required: true, message: "请设置发布时间", trigger: "blur" }
        ]
      },
      editorOption: {
        placeholder: "请输入文章内容"
        // something config
      },
      typeCenter: []
    };
  },
  props:{
      id:{
          type:Number
      }
  },
  methods: {
      cancel(){
          this.$emit('cancel');
      },
        onSubmit(formName) {//提交数据
        this.loading=true;
        //console.log(this.device)
        const self = this;
        self.$refs[formName].validate(valid => {
            if (valid) {
            // this.device.address=this.address.chineseName;
            this.device.address.detail=this.device.detail;
            // this.currencyCode;
            // this.device.country=this.address.code
            // //console.log();
            // this.device.country=this.address.id;
            apiPut.drive.getDriveList(this.id,this.device).then(res=>{//提交数据
                //console.log(res);
                if(res.status){
                    this.$message.success('修改机器信息成功');
                    this.$emit('cancel','edit');
                }else{
                    this.$message({
                        message:res.message,
                        type:'warning'
                    })
                    this.loading=false;
                    this.$emit('cancel');
                    // return;
                }
                // this.getDriveList();
                // this.$router.push('/deviceCenter');
                this.loading=false;
            }).catch(err=>{
                this.loading=false;
                // //console.log(JSON.pase(err.message));
                self.$message.error(err.message);
            })
            } else {
            self.$message.error("文章内容不完整");
            return false;
            }
        });
        },
        getCountry(page=0){//获取城市
            return new Promise((resolve,reject)=>{
                var params={
                    page:page,
                    size:10,
                }
                apiGet.country.getCountry(params).then(res=>{
                    this.country=res.content;
                    resolve(this.country);
                })
            })
        },
        enterCountry(data){
            // //console.log(this.device)
            // data.forEach(item=>{
            //     if(item.chineseName==this.device.address.cityName){
            //         this.address==item;
            //     }else{
                    
            //     }
            // })
            // this.device.country=this.address.id;
            // // this.device.currencyCode=this.address.code;
            // //console.log(this.address)
        },
    },
    mounted() {
        // //console.log(process)
        this.loading=true;
        axios.get(process.env.BASE_URL+'/api/btm/'+this.id).then(res=>{//编辑页面，数据回写
            let data=res.data;
            this.loading=false;
            //console.log(data);
            // this.device=data;
            this.getCountry().then(resn=>{//城市字段回显
                this.device.country=data.country.id;
            })
            this.device.address.cityName=data.country.chineseName;
            this.device.address.detail=data.address.detail;
            this.device.code=data.code;
            this.device.detail=data.address.detail;
            this.device.name=data.name;
            this.device.status=data.status;
            
            this.device.address.googleLat =data.address.googleLat ;
            this.device.address.googleLon =data.address.googleLon ;
            this.device.address.mapLat =data.address.mapLat ;
            this.device.address.mapLon =data.address.mapLon ;
        })
        // this.getCountry();
    }
};
</script>
<style scoped>
.editModal{
    position: absolute;
    width: 60%;
    top:50%;
    left: 20%;
    background: #fff;
    transform: translateY(-50%);
}
.baseinfo {
  border: 1px solid #40abf9;
  border-radius: 3px;
  padding: 60px 20px 20px;
  position: relative;
  margin-bottom: 15px;
  box-sizing: border-box;
  width: 100%;
}
.baseinfo_title {
  display: block;
  background: #40abf9;
  color: #fff;
  padding: 6px 15px;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
div.el-form-item{
    margin-bottom: 30px;
}
.el-form-item__content {
  margin-left: 0 !important;
}
</style>